<template>
  <div class="skillgroup_node_edit">
    <div class="btn_box">
      <el-button type="primary" class="primary_btn" @click="saveEdit">{{$t('public.save')}}</el-button>
      <!--<el-button v-show="nodeObj._id && showDeleteBtn" type="primary" class="primary_btn delete_btn" @click="deleteLi">{{$t('public.delete')}}</el-button>-->
    </div>
    <el-form :model="nodeObj" label-width="180px" ref="nodeObj" :rules="rules" v-if="showForm">
      <el-row>
        <el-col :span="12">
          <el-form-item class="form_li"  prop="name"  :label="$t('configLazyLoad.process.nodeName')">
            <el-input :maxlength="30" v-model.trim="nodeObj.name" class="input_box"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="form_li"  prop="toPeer"  :label="$t('configLazyLoad.process.skill1')">
            <el-select v-model="nodeObj.toPeer" :placeholder="$t('webchat.placeSkillsGrouop')">
              <el-option
                v-for="item in peerOptions"
                :key="item._id"
                :label="item.DisplayName"
                :value="item.Exten">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item class="form_li"  prop="queueEmptyProcessTo" :label="$t('configLazyLoad.process.skill2')">
        <nodeSelect
          @oneChange="onChange"
          onePath="queueEmptyProcessType"
          :nodeType="nodeObj.queueEmptyProcessType"
          @twoChange="onChange"
          twoPath="queueEmptyProcessTo"
          :contentId="nodeObj._id"
          :nodeLi="nodeObj.queueEmptyProcessTo"
          currentType="queue"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li"  prop="agentOfflineProcessTo" :label="$t('configLazyLoad.process.skill3')">
        <nodeSelect
          @oneChange="onChange"
          onePath="agentOfflineProcessType"
          :nodeType="nodeObj.agentOfflineProcessType"
          @twoChange="onChange"
          twoPath="agentOfflineProcessTo"
          :nodeLi="nodeObj.agentOfflineProcessTo"
          :contentId="nodeObj._id"
          :transeLeaveMsg="true"
          currentType="queue"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li" prop="queueNumReachProcessTo">
        <div class="queue_num_box">
          <span>{{$t('configLazyLoad.process.skill4')}}</span>
          <el-input class="queue_num_input" :maxlength="3" v-model="nodeObj.queueNum"></el-input>
          <span>{{$t('configLazyLoad.process.skill5')}}</span>
        </div>
        <nodeSelect
          @oneChange="onChange"
          onePath="queueNumReachProcessType"
          :nodeType="nodeObj.queueNumReachProcessType"
          @twoChange="onChange"
          twoPath="queueNumReachProcessTo"
          :nodeLi="nodeObj.queueNumReachProcessTo"
          :contentId="nodeObj._id"
          :transeLeaveMsg="true"
          currentType="queue"
          :transeLineUp="true"
        ></nodeSelect>
      </el-form-item>
      <el-form-item class="form_li" prop="welcomeNodeId" :label="$t('configLazyLoad.process.skill6')">
        <welcomeSelect
          @changeOption="welcomeChange"
          :welcomeNodeId = 'nodeObj.welcomeNodeId'>
        </welcomeSelect>
      </el-form-item>
    </el-form>
    <!-- 微信留言和放弃排队引导 -->
    <affix class="wxEdit" :label="$t('configLazyLoad.process.skill7')">
      <div class="remark">{{$t('channelsettings.schedule7')}}<br/>
        {{$t('configLazyLoad.process.skill8')}}<br/>
        {{$t('configLazyLoad.process.skill9')}}
      </div>
      <el-form :model="nodeObj" label-width="150px" ref="nodeObj">
        <el-form-item class="form_li wx_edit_form" prop="wxGuideWord" :label="$t('configLazyLoad.process.skill10')">
          <el-input class="form_li_input" type="textarea" :placeholder="$t('configLazyLoad.process.skill11')" v-model="nodeObj.wxGuideWord"></el-input>
        </el-form-item>
        <el-tooltip class="example_tip" effect="dark" placement="right">
          <img slot="content" src="./img/wechat_example.png" alt="" style="max-width: 20em"/>
          <span class="example">{{$t('configLazyLoad.process.processLabel59')}}</span>
        </el-tooltip>
        <div class="wx_edit_title" style="margin-top: 12px;">{{$t('configLazyLoad.process.skill12')}}</div>
        <el-row>
          <el-form-item class="form_li wx_edit_form"  prop="wxLeaveKeyWord" :label="$t('configLazyLoad.process.skill13')">
            <el-input class="form_li_input" :placeholder="$t('webchat.leaveMessage')" v-model.trim="nodeObj.wxLeaveKeyWord"></el-input>
          </el-form-item>
          <el-form-item class="form_li wx_edit_form" :label="$t('configLazyLoad.process.skill14')">
            <el-input class="start_input" v-model.trim="placeholder" :disabled="true"></el-input>
            <el-select class="node_name_select" v-model.trim="nodeObj.wxLeaveTransferId" :placeholder="$t('configLazyLoad.process.processLabel3')" @change="nodeLiChange">
              <el-option
                      v-for="item in COptions"
                      :label="item.label"
                      :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <div class="wx_edit_title">{{$t('configLazyLoad.process.skill15')}}</div>
        <el-form-item class="form_li" prop="wxQueueKeyWord" :label="$t('configLazyLoad.process.skill13')">
          <el-input class="form_li_input" v-model="nodeObj.wxQueueKeyWord" placeholder="q"></el-input>
          {{$t('configLazyLoad.process.skill16')}}
        </el-form-item>
      </el-form>
    </affix>
  </div>
  </template>
<script>
  import nodeSelect from '../../../base/webchatNodeSelect.vue'
  import welcomeSelect from '../../../base/webchatNodeSelectWel.vue'
  import affix from '@/components/ui-modules/affix/Affix.vue'
  import * as types from '@modules/config/channelConfig/webchatSchdule/mutation-types.js'
  import { deepClone } from '@utils/m7Utils.js'
  export default{
    name: 'skillGroupEdit',
    data () {
      return {
        peerOptions: [],
        rules: {
          name: [
            { required: true, message: this.$t('configLazyLoad.process.processLabel7'), trigger: 'blur' }
          ],
          toPeer: [
            { required: true, message: this.$t('webchat.placeSkillsGrouop'), trigger: 'change' }
          ]
        },
        placeholder: this.$t('channelsettings.process14'),    //  默认文案
        showForm: false,
        nodeObj: {
          _id: '', // id
          account: '', // 账户id
          type: 'queue', // 节点类型
          name: '', // 节点名称
          toPeer: '',
          queueEmptyProcessType: 'system', // 技能组为空时流转类型
          queueEmptyProcessTo: 'finish', // 技能组为空时流转节点id
          agentOfflineProcessType: 'system', // 座席不在线时流转类型
          agentOfflineProcessTo: 'finish', // 座席不在线时流转节点id
          queueNum: 30, // 排队数
          queueNumReachProcessType: 'system', // 排队数达到设定时流转类型
          queueNumReachProcessTo: 'finish', // 排队数达到设定时流转节点id
          welcomeNodeId: '',
          createTime: '', // 创建时间
          createUser: '', // 创建人
          updateTime: '', // 修改时间
          updateUser: '', // 修改人
          nextNodeIds: [''], // 流转节点id数组
          wxLeaveKeyWord: '',               //  留言分流 设置命中关键词
          wxLeaveTransferType: 'leavemsg',  //  留言分流 命中关键词转向类型
          wxLeaveTransferId: '',            //  留言分流 命中关键词转向节点id
          wxQueueKeyWord: '',               //  放弃排队 设置命中关键词
          wxQueueType: 'system',            //  放弃排队 命中关键词转向类型
          wxQueueId: 'finish',              //  放弃排队 命中关键词转向节点id
          wxGuideWord: ''                   //  放弃排队 分流引导文案
        }
      }
    },
    props: {
      showDeleteBtn: {
        type: Boolean,
        default: true
      },
      dataId: {
        type: String,
        default: ''
      },
      random: Number,
      todoType: String,
      activeChangeRandom: Number
    },
    computed: {
      COptions () {
        let nodes = this.$store.state.config.channelConfig.webchatSchdule.leavemsgNode
        let arr = nodes.map(node => ({ label: node.name, value: node._id }))
        return arr
      }
    },
    watch: {
      random () {
        this.resetForm()
        this.initData()
      },
      activeChangeRandom (cur) {
      }
    },
    methods: {
      initData () {
        this.showForm = false
        this.$store.dispatch('getCache', { type: 'mailQueues' }).then(req => {
          let mailQueues = this.$getCache('mailQueues')
          if (!mailQueues || mailQueues.length === 0) {
            return
          }
          this.peerOptions = mailQueues || []
        })
        if (this.dataId) {
          let data = {
            _id: this.dataId
          }
          this.$store.dispatch('getNodeById', data).then((res) => {
            if (res.success) {
              this.$nextTick(() => {
                this.nodeObj = deepClone(res.data)
                if (typeof this.nodeObj.welcomeNodeId !== 'string') {
                  this.nodeObj.welcomeNodeId = ''
                }
                this.changeRandom = Math.random()
              })
            }
            this.showForm = true
          })
        } else {
          this.nodeObj = {
            _id: '', // id
            account: '', // 账户id
            type: 'queue', // 节点类型
            name: '', // 节点名称
            toPeer: '',
            queueEmptyProcessType: 'system', // 技能组为空时流转类型
            queueEmptyProcessTo: 'finish', // 技能组为空时流转节点id
            agentOfflineProcessType: 'system', // 座席不在线时流转类型
            agentOfflineProcessTo: 'finish', // 座席不在线时流转节点id
            queueNum: 30, // 排队数
            queueNumReachProcessType: 'system', // 排队数达到设定时流转类型
            queueNumReachProcessTo: 'finish', // 排队数达到设定时流转节点id
            welcomeNodeId: '',
            createTime: '', // 创建时间
            createUser: '', // 创建人
            updateTime: '', // 修改时间
            updateUser: '', // 修改人
            nextNodeIds: [''], // 流转节点id数组
            wxLeaveKeyWord: '',               //  留言分流 设置命中关键词
            wxLeaveTransferType: 'leavemsg',  //  留言分流 命中关键词转向类型
            wxLeaveTransferId: '',            //  留言分流 命中关键词转向节点id
            wxQueueKeyWord: '',               //  放弃排队 设置命中关键词
            wxQueueType: 'system',            //  放弃排队 命中关键词转向类型
            wxQueueId: 'finish',              //  放弃排队 命中关键词转向节点id
            wxGuideWord: ''                   //  放弃排队 分流引导文案
          }
          this.showForm = true
        }
      },
      onChange (data) {
        this.nodeObj[data.path] = data.value
      },
      welcomeChange (data) {
        this.nodeObj.welcomeNodeId = data
      },
      resetForm () {
        this.$refs['nodeObj'].resetFields()
      },
      saveEdit () {
        let that = this
        this.$refs['nodeObj'].validate((valid) => {
          if (valid) {
            let regu = /^[0-9]*[1-9][0-9]*$/
            if (!regu.test(that.nodeObj.queueNum)) {
              this.$message.error(this.$t('configLazyLoad.process.skill17'))
              return false
            }
            that.nodeObj.queueNum = parseInt(that.nodeObj.queueNum)
            if (this.todoType === 'add') {
              that.$store.dispatch('addNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.ADD_WEBCHAT_SCHDULE_LIST_NODE, {node: 'queueNode', data: that.nodeObj})
                  that.$message.success(this.$t('configLazyLoad.channel.addSucc'))
                  that.$emit('back')
                }
              })
            } else {
              that.$store.dispatch('updateNode', that.nodeObj).then((res) => {
                if (res.success) {
                  that.$store.commit(types.UPDATE_WEBCHAT_SCHDULE_LIST_NODE, {node: 'queueNode', data: that.nodeObj})
                  that.$message.success(this.$t('configLazyLoad.public.editSuccess'))
                  that.$emit('back')
                }
              })
            }
          }
        })
      },
      nodeLiChange (data) {
        this.nodeObj.wxLeaveTransferId = data
      }
    },
    components: {
      nodeSelect,
      welcomeSelect,
      affix
    },
    beforeMount () {
      this.initData()
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../../../../assets/common.styl"
  .btn_box
    text-align right
    margin-bottom 10px
  .delete_btn
    background-color #ff6b6b
    border-color #ff6b6b
  .skillgroup_node_edit
    padding 10px
  .queue_num_box
    display inline-block
    margin 0 12px 0 -170px
    font-size 12px
    float left
    color $cf-gray1
  .queue_num_input
    display inline-block
    width 50px
  .overflow
    oerflow hidden
  .unUseing
    width 250px
  .msg_list_box
    position relative
    padding 8px 28px 8px 8px
    background #f4f4f4
  .msg_time_box
    margin-top 8px
    .input_box
      width 124px
      display inline-block
  .todo_btn
    cursor pointer
    position absolute
    right 8px
    color $c-main
  .welcome_msg_box
    display block
  .title
    margin 10px 0 14px
  .start_input
    position relative
    margin-right 24px
    line-height 40px
    display inline-block
    width 150px
    &:before
      content: ''
      border-top 2px solid $c-border2
      width 16px
      position absolute
      top 20px
      right -20px
  .msg_time_title
    margin-right 16px
  .border-top
    &:before
      content ''
      display inline-block
      height 1px
      width 80%
      margin 0 auto
  .title_border
    position absolute
    height 1px
    background #ccc
    width 96%
    margin 0 auto
    display inline-block
    top 0
  .divide
    border-top 1px solid $c-border1
  .remark
    color #3b5998
  .wxEdit
    margin-top 20px
    .wx_edit_title
      width 120px
      text-align right
    .form_li_input
      width 300px
  .wx_edit_form,.example_tip
    display inline-block
  .example_tip
    cursor pointer
  .example
    color #3b5998
    margin-left 30px
</style>
